<template>
	<div :class="uptype == 6 ? '' : classdiv">
		<el-upload class="avatar-uploader" :action=baseURL :headers="headers" :data="{ 'folder': list.data }"
			name="file" :show-file-list="list.list" :drag="list.drag" :on-success="successimg" :on-error="errorimg"
			:before-upload="progressimg" :disabled="disabled">
			<!-- 图片形式上传 -->
			<div v-if="uptype == 1" v-loading="data.loading">
				<div v-if="url == ''">
					<img :src='defaults' :class="classimg" />
				</div>
				<div v-else>
					<img v-if="type == 1" :src='url' :class="classimg" />
					<img v-else :src='bofang' :class="classimg" @click="vodes()" />
				</div>
			</div>
			<div v-if="uptype == 6" v-loading="data.loading" class="avatar-uploader">
				<img v-if="uploadUrl" :src="uploadUrl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon">
					<Plus />
				</el-icon>
			</div>
			<div v-else v-loading="data.loading">
				<el-button size="small" type="primary">
					{{ $t('public.upload') }}
				</el-button>

				
			</div>

		</el-upload>

		<div v-if="url != '' && del" class="inline-block absolute top-0 right-0" @click="deluploader">
			<el-icon style="font-size: 18px;">
				<CircleCloseFilled />
			</el-icon>
		</div>

		<el-dialog v-if="data.vodes" v-model="data.vodes" width="30%">
			<div>
				<Video :url="url" :control="false" />
			</div>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Video from '@/components/Video/index.vue';
import bofang from '@/assets/bofang.png';
import defaults from '@/assets/default.png';
let dev = window.location.hostname == 'localhost' ? window.location.origin : window.PLATFROM_CONFIG.baseUrl
let baseURL = dev + '/management/common/uploadFile'
let emit = defineEmits(['exposeData'])
let headers = JSON.parse(localStorage.getItem('user'))
/**
 * data 上传时附带的额外参数
 * name 上传的文件字段名
 * list 是否显示已上传文件列表
 * drag 是否启用拖拽上传
 * url 文件地址
 * disabled 是否禁止上传
 * size 文件上传大小限制
	* */
let props = defineProps({
	list: { // 信息数据
		type: Object,
		default: {
			data: 'system',
			list: false,
			drag: false
		}
	},
	name: {
		type: String,
		default: '上传'
	},
	classdiv: { // 区域大小
		type: String,
		default: 'w-full h-full'
	},
	classimg: { // 图片大小
		type: String,
		default: 'w-full h-full'
	},
	disabled: { // 是否禁止上传
		type: Boolean,
		default: false
	},
	size: { // 上传文件大小，默认5242880B(3M)
		type: Number,
		default: 3145728
	},
	url: { // 文件地址
		type: String,
		default: ''
	},
	type: { // 上传类型限制 1图片、2视频、3音频、99通用
		type: Number,
		default: 3
	},
	del: { // 是否显示删除按钮
		type: Boolean,
		default: false
	},
	uptype: { // 上传样式、1图片样式，2按钮样式
		type: Number,
		default: 1
	},
	uploadUrl: {
		type: String,
		default: null
	}
})

let data = reactive({
	show: true,
	vodes: false,
	loading: false
})

let urldata = { // 回调数据
	name: props.list.name,
	status: 0,
	file: {}
}
// 上传中
let progressimg = (file) => {
	data.loading = true
	if (props.type == 1 || props.uptype == 6) {
		if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/jpg') {
			ElMessage({
				message: $t('message.upFormat1'),
				type: 'error'
			})
			data.loading = false
			return false
		}
	}

	if (props.type == 2) {
		if (file.type != 'video/mp4') {
			ElMessage({
				message: $t('message.upForma3'),
				type: 'error'
			})
			data.loading = false
			return false
		}
	}

	if (props.type == 3) {
		if (file.type != 'audio/mpeg' && file.type != 'audio/mp3' && file.type != 'audio/wav') {
			ElMessage({
				message: $t('message.upFormat2'),
				type: 'error'
			})
			data.loading = false
			return false
		}
	}

	// let imgsize = measure(props.size)
	// if (file.size > props.size) {
	// 	ElMessage({
	// 		message: '上传文件过大，请上传' + imgsize + '内大小的文件',
	// 		type: 'error'
	// 	})
	// 	return false
	// }
}

// 上传成功
let successimg = (response, file, fileList) => {
	if (response.state !== 200) {
		ElMessage({
			message: $t('message.uploadFailed'),
			type: 'error'
		})
		urldata.status = 100
		data.loading = false
		transmit()
		return;
	}
	ElMessage({
		message: $t('message.uploadSuccess'),
		type: 'success'
	})
	urldata.file = file
	urldata.status = 200
	data.show = false
	data.loading = false
	transmit()
}

// 查看视频
let vodes = () => {
	data.vodes = true
}

// 上传失败
let errorimg = (err, file, fileList) => {
	ElMessage({
		message: $t('message.networkFailed'),
		type: 'error'
	})
	urldata.file = file
	urldata.status = 100
	data.loading = false
	transmit()
}

// 回调结果
let transmit = () => {
	emit('exposeData', urldata)
}

// 删除素材
let deluploader = () => {
	emit('exposeData', '')
}

// 计算上传文件大小
// let measure = (e) => {
// 	if (e === 0 || e === null) return '0KB'
// 	const k = 1024 // or 1024
// 	const sizes = ['K', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
// 	const i = Math.floor(Math.log(e) / Math.log(k))
// 	return (e / Math.pow(k, i)).toPrecision(1) + '' + sizes[i]
// }

</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	border: 1px solid #eee;
	color: #8c939d;
	width: 78px;
	height: 78px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 78px;


	height: 78px;
	display: block;
}
</style>
